@extends('admin.layout')
@section('content')
 
 <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                用户管理
                <small>列表</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
                <li><a href="#">用户管理</a></li>
                <li class="active">列表</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">快速查看用户</h3>
                        </div><!-- /.box-header -->
                        <div class="box-body">

                         @if(session('info'))

                            <div class="alert alert-danger alert-dismissable">
                                <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                <h4><i class="icon fa fa-ban"></i> 提示!</h4>
                            <p>
                            
                                {{ session('info') }}
                            @endif
                            </p>
                            </div>

                        <form action=" {{ url('/admin/user/index') }} " method='get'>
                        <div class ="row">
                            <div class="col-md-4">
                                
                               <div class="form-group">
                                    
                                    <select name='num' class="form-control">
                                        <option
                                        @if(!empty($request['num'])

                                        && $request['num']==10)
                                        selected = 'selected'
                                        @endif

                                         value='10'>10</option>
                                        <option 
                                         @if(!empty($request['num'])
                                         && $request['num']==25)
                                        selected = 'selected'
                                        @endif

                                        value='25'>25</option>
                                        <option
                                         @if(!empty($request['num'])
                                         && $request['num']==50)
                                        selected = 'selected'
                                        @endif


                                         value='50'>50</option>
                                        <option
                                         @if(!empty($request['num'])
                                         && $request['num']==100)
                                        selected = 'selected'
                                        @endif
                                         value='100'>100</option>
                                      
                                    </select>
                                </div>

                            </div>
                            <div class="col-md-4 col-md-offset-4">
                                
                                <div class="input-group input-group-sm">
                                <input type="text" value = "{{ $request['keywords'] or '' }}" name='keywords' class="form-control">
                                <span class="input-group-btn">
                                <button  class="btn btn-info btn-flat">搜索</button>
                            </div>
                        </div>

                        
                                 </span>
                            </div>
                            </form>
                            <br>
                            <table id="example2" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>邮箱</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                
                                @foreach($data as $user)

                                <tr>
                                    <td class='ids'>{{ $user -> id }}</td>
                                    <td class='name' >{{ $user -> name }}
                                    </td>
                                    <td>{{ $user -> email }}</td>

                                    <td class='status'>
                                    @if($user -> status ==0)
                                    启用
                                    @else 
                                    禁用
                                    @endif

                                    </td>
                                    <td><a href="{{ url('/admin/user/edit') }}/{{ $user ->id }}">编辑</a> <a href="{{ url('/admin/user/delete') }}/{{ $user ->id }}">删除</a></td>
                                </tr>
                              
                                </tbody>
                                @endforeach
                               
                            </table>
                        </div><!-- /.box-body -->
                        {!! $data-> appends($request) ->render() !!}
                    </div><!-- /.box -->
                  
                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->
    </div><!-- /.content-wrapper --> 

    <script>
    window.onload =function()
    {
         $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
        });
        // 发送ajax
        // alert($);
        // 修改状态
        $('.status').on('click',function(){
            var t = $(this);
            // var id = $(this).parent().children().first().html();
            var id = $(this).parent().find('.ids').html();
            $.ajax({
                url:"{{ url('/admin/user/ajaxUpdate') }}",
                //这边的url地址要加"",加了模板会解析,不加就算会解析它
                data:{id:id},
                type:'POST',
                success:function(data)
                {
                    
                    if(data == '0')
                    {
                        t.html('启用');
                    }else if(data == '1')
                    {
                        t.html('禁用');
                    }else
                    {
                        alert('修改失败');
                    }
                },
                dataType:'json'
            });
        });

        function dblClick()
        {
             var t = $(this);
            // 获取id
            var id = $(this).parent().find('.ids').html();
            var oldName = $(this).html();

            //设置input
            var inp = $("<input type='text'/>");
            //在对象里面加入val值
            inp.val(oldName);

            //将inp元素写入这个对象中
            $(this).html(inp);

            //获取焦点
            inp.select();

            //添加失去焦点事件,当失去焦点时值修改成功,input框消失
            inp.on('blur',function(){
                //获取新值
                var newName = inp.val();

                 $.ajax({
                url: "{{ url('/admin/user/ajaxName') }}",
                type:'POST',
                data:{id:id,name:newName},
                success:function(data)
                {
                       if(data == '0')
                       {
                            t.html(newName);
                       }else if(data == '1')
                       {
                        t.html(oldName);
                       }else
                       {
                        t.html(oldName);
                        alert('用户名已存在');
                       }
                },
                dataType:'json'

            });
                 //添加双击事件
                 
                 t.on('dblclick',dblClick);
            });

            //清除事件
            t.unbind('dblclick')
        }

        
        $('.name').on('dblclick',dblClick);
    }
   
    </script>
@endsection